<template>
  <view id="order">
    <u-navbar leftIconColor="#fff" :autoBack="true" bgColor="#00c7db" :titleStyle="titlStyle" title="订单详情"> </u-navbar>
    <view class="order_content" v-if='list.total_num'>

      <view class="order_info">

        <view class="order_top">
          <u--image height="5.6rem" width="5.6rem" :src="timer" mode="aspectFit"></u--image>
          <view class="order_info_right">
            <h2>118号桌待门店接单</h2>
            <p>请及时联系服务员确认一点菜品信息!</p>
          </view>
        </view>

        <h3>已点菜品{{list.total_num}}份,合计 : <span class="price">{{list.total_price}}元</span> </h3>

        <button @click="doPay()">
          立即支付
        </button>
      </view>

      <!--订单列表-->

      <view class="order_list">

        <h3>菜品详情:</h3>
        <ul class="list">
          <li v-for="item in list.item" :key="item._id">
            <view class="title">
              {{item.title}}/
              已下厨
            </view>

            <view class="num">

              {{item.num}}份
            </view>

            <view class="price">

              ¥{{item.price}}元
            </view>

          </li>

        </ul>

      </view>

    </view>

    <view v-if="!list.total_num" class="cart_empty">您还没有点餐，点击菜单开始点菜</view>

    <NavFooter></NavFooter>

    <view id="footer_book" @click="toMenu" class="footer_book" style="left:auto;right:5px;">
      <u--image height="1.5rem" width="1.5rem" :src="menu" mode="aspectFit"></u--image>
      <p>菜单</p>
    </view>
  </view>
</template>


<script>
//引入NavFooter组件
import NavFooter from '@/components/NavFooter/index.vue'
import {
  getShopOrderData
} from "@/common/api.js";
export default {

  data() {
    return {
      menu: require('@/static/images/pages/menu/menu.png'),
      timer: require('@/static/images/pages/menu/timer.png'),
      titlStyle: {
        "color": "#ffffff"
      },
      list: {

      }
    }
  },
  components: {
    NavFooter
  },
  onLoad() {

    this.getOrder();
  },
  methods: {
    toMenu() {
      uni.$u.route(`/pages/orderHome/index`);
    },
    async getOrder() {
      let res = await getShopOrderData({ uid: uni.getStorageSync("roomid") })
      console.log("🚀 ~ file: foodOrder.vue:103 ~ getOrder ~ res:", res)
      if (res.code == 200) {
        this.list = res.data
      }
    },
    doPay() {

      var that = this;
      var uid = storage.get('roomid');
      var api = this.api + 'api/doPay';
      this.$http.post(api, {
        uid,
        total_price: that.list.total_price,
        order_id: that.list.order_id,
        return_url: Config.return_url
      }).then((response) => {
        console.log(response);
        location.href = response.body.result.data;
      }, (err) => {
        console.log(err);
      })
    }
  },

}
</script>

<style lang="scss">
.order_content {
  padding: 1rem;
  margin: 100rpx 0 0 0;
  .order_info {
    background: #fff;

    border-radius: 0.5rem;

    .order_top {
      display: flex;

      img {
        width: 5.6rem;
        height: 5.6rem;
      }

      .order_info_right {
        flex: 1;
        padding-top: 0.5rem;
      }
    }

    h3 {
      line-height: 2;
      padding: 0.5rem;

      .price {
        font-size: 2rem;

        color: red;
      }
    }
  }

  //  订单列表

  .order_list {
    background: #ffffff;
    border-radius: 0.5rem;
    margin-top: 1rem;

    padding: 0.5rem;

    h3 {
      line-height: 2;
    }

    .list {
      li {
        display: flex;

        line-height: 2;
        padding: 0.5rem 0rem;

        .title {
          flex: 2;
        }

        .num {
          flex: 1;
          text-align: center;
        }

        .price {
          flex: 1;

          text-align: center;
        }
      }
    }
  }

  /*支付页面*/
  .order_pay {
    background: #fff;

    border-radius: 0.5rem;

    h3 {
      padding: 2rem 0rem 0.5rem 0rem;

      font-size: 2rem;
      text-align: center;
    }

    .order_pay_detail {
      display: flex;

      line-height: 2;

      border-bottom: 1px solid #eee;

      padding: 0.5rem;

      .d_num,
      .p_num,
      .order_time {
        flex: 1;
      }
    }

    .order_pay_info {
      line-height: 2;

      display: flex;

      margin: 1rem 0rem;
      padding: 0.5rem 0.5rem 1rem 0.5rem;

      .price_list {
        flex: 1;

        .price {
          font-size: 2rem;

          color: red;
        }
      }

      .pay_button {
        width: 10rem;
        border-radius: 0.5rem;
        background: red;
        color: #fff;
        text-align: center;
        height: 2.6rem;
        line-height: 2.6rem;
        position: relative;

        top: 0.5rem;
      }
    }
  }
}
.footer_nav {
  background: #00c7db;
  color: #fff;
  left: 2.7rem;
}

.cart_empty {
  text-align: center;
  line-height: 3;
  margin-top: 10rem;

  h3 {
    font-size: 1.8rem;
  }
}
</style>